1. attached files
    1. add file
    # an anti-social framing of ~~technical~~ disability ![](attachment:7ad99f72-fa9e-4aa6-b377-29e798c4c7b1.png) this talk explores what happens when we stop treating accessibility as a purely technical concern; how data visualizations and other technical communications could consider what is seen, what is hidden, and who is invited into the work, as modern art does. this perspective offers a way to understand accessibility not as an afterthought or a checklist, but as a creative and relational practice. through this lens, the talk invites folks to experiment with art and reproduction as a method for rethinking technical practice. making art, even imperfectly, cultivates questions that could be used to bring accessibility earlier into the process: * what/who am i including and excluding? * how do i make the implicit explicit? * what senses are used to portray this narrative? [web version](https://tonyfast.github.io/antisocial/) ![qr code to the web version of the talk](attachment:79c6cc18-bf23-4925-8f2a-983190252bae.png)
    -1
      • an anti-social framing of ~~technical~~ disability

        this talk explores what happens when we stop treating accessibility as a purely technical concern; how data visualizations and other technical communications could consider what is seen, what is hidden, and who is invited into the work, as modern art does.

        this perspective offers a way to understand accessibility not as an afterthought or a checklist, but as a creative and relational practice.

        through this lens, the talk invites folks to experiment with art and reproduction as a method for rethinking technical practice. making art, even imperfectly, cultivates questions that could be used to bring accessibility earlier into the process:

        • what/who am i including and excluding?
        • how do i make the implicit explicit?
        • what senses are used to portray this narrative?

        web version

        qr code to the web version of the talk

  2. attached files
    1. add file
    ## about _antisocial_ and _accessibility_ in this talk <dl> <dt>anti-social</dt> <dd>a dissonance with the rules and environments we're social in</dd> <dd> <figure> ![image.png](attachment:54bf8bac-dbad-4eb3-a987-ccb21b295232.png) <blockquote><mark>the poet, the artist, the sleuth - whoever sharpens our perception tends to be antisocial; rarely "well-adjusted," they cannot go along with currents and trends. A strange bond often exists among anti-social types in their power to see environments as they really are.</mark><span class="no-pres"> This need to interface, to confront environments with a certain antisocial power, is manifest in the famous story, "the emperor's new clothes." "well-adjusted" courtiers, having vested interests, save the emperor as beautifully appointed. the "antisocial" brat, unaccustomed to the old environments, clearly saw that the emperor "ain't got nothing on." the new environment was clearly visible to them. </span> </blockquote> <figcaption>marshall mcluhan's <i>the medium is the massage</i></figcaption> </figure></dd> <dd>this talk was developed on an island, and it takes effort to leave its pastoral silence.</to> </dd> </dt> <dt>accessibility <dd>the technical parts of disability, physical and digital</dd> </dt> </dl> <!-- print( ```pug h2 about the title dt anti-social dd a dissonance with the rules and environments we're social in dd the poets, the artists, the slueths, the disability advocates that sharpen our perceptions. dd the developed this talk on an island, and it takes effort (and money, ferry prices are getting ridiculous) to leave its pastoral silence. dt accessibility dd the physical and digital technical parts of disability ``` ._repr_html_()) -->
    -1
      • about antisocial and accessibility in this talk

        anti-social
        a dissonance with the rules and environments we're social in

        image.png

        the poet, the artist, the sleuth - whoever sharpens our perception tends to be antisocial; rarely "well-adjusted," they cannot go along with currents and trends. A strange bond often exists among anti-social types in their power to see environments as they really are. This need to interface, to confront environments with a certain antisocial power, is manifest in the famous story, "the emperor's new clothes." "well-adjusted" courtiers, having vested interests, save the emperor as beautifully appointed. the "antisocial" brat, unaccustomed to the old environments, clearly saw that the emperor "ain't got nothing on." the new environment was clearly visible to them.
        marshall mcluhan's the medium is the massage
        this talk was developed on an island, and it takes effort to leave its pastoral silence.
        accessibility
        the technical parts of disability, physical and digital
  3. attached files
    1. add file
    ### overview i appreciate the opportunity to discuss art with you at the aptly named CREATE seminar series. today, we'll look through modern, post-modern, and contemporary art technologies as means to making difficult concepts accessible. i'm going to show a lot in a short time; this talk is chock full of links and content you can revisit later. it makes me happy to leave the island to be here, to share my passions for art and science: 1. i get to revisit so many beautiful things, appreciate where i've been, and find new meaning in works. 2. presentations challenge my accessibility practice. 3. i get to encourage folks to appreciate, make, and open themselves up to art. 4. i've saved enough spoons to be here. ### outcomes i hope when this talk is over you find yourself wanting to make or learn something. <!-- pictures of the timeline. -->
    -1
      • overview

        i appreciate the opportunity to discuss art with you at the aptly named CREATE seminar series. today, we'll look through modern, post-modern, and contemporary art technologies as means to making difficult concepts accessible.

        i'm going to show a lot in a short time; this talk is chock full of links and content you can revisit later.

        it makes me happy to leave the island to be here, to share my passions for art and science:

        1. i get to revisit so many beautiful things, appreciate where i've been, and find new meaning in works.
        2. presentations challenge my accessibility practice.
        3. i get to encourage folks to appreciate, make, and open themselves up to art.
        4. i've saved enough spoons to be here.

        outcomes

        i hope when this talk is over you find yourself wanting to make or learn something.

  4. attached files
    1. add file
    ## getting trapped inside a work ![2]() ![](https://encrypted-tbn0.gstatic.com/licensed-image?q=tbn:ANd9GcRuVxp2KC__cO2rkGIaypAT58_tku3NsqKkLFfhxCq8s-BNFoBrvYKQHss9bgpV4_L0wCtF6SWWaZ4HF_8) ![](attachment:f01beab3-dc2f-4b99-bdd4-baa04bd73e82.png) i often think of alexander calder making his moving sculptures and his unique perspective embedded inside the work. sometimes, this feeling hits me the strongest when i am working with data zooming in and out of it. overall i like thinking about and viewing art. to the right i'm at the <abbr title="los angeles county art museum">LACMA</abbr> maintaining a safe distance from [alexander calder's little face], but flirting dangerously with acceptable art viewing of [max ernst's entire city], while seemingly ignoring [magritte's treachery of images]. _my first time through i missed the calder._ [magritte's treachery of images]: # [alexander calder's little face]: https://collections.lacma.org/node/211703 [max ernst's entire city]: https://unframed.lacma.org/2023/05/16/new-acquisition-max-ernst%E2%80%99s-%E2%80%9C-entire-city%E2%80%9D
    -1
      • getting trapped inside a work

        2

        i often think of alexander calder making his moving sculptures and his unique perspective embedded inside the work. sometimes, this feeling hits me the strongest when i am working with data zooming in and out of it.

        overall i like thinking about and viewing art. to the right i'm at the LACMA maintaining a safe distance from alexander calder's little face, but flirting dangerously with acceptable art viewing of max ernst's entire city, while seemingly ignoring magritte's treachery of images. my first time through i missed the calder.

  5. attached files
    1. add file
    ### the treachery of images magritte was treading in ambiguity and his work to disrupt the hierarchy and order of figures and texts. his primary media was painting, and eventually sculpture, and these media proved effective at clarifying ambiguity. ![](https://cdn.britannica.com/75/261475-050-84DBD901/the-treachery-of-images-rene-magritte-centre-pompidou-paris-france-retrospective.jpg)
    -1
      • the treachery of images

        magritte was treading in ambiguity and his work to disrupt the hierarchy and order of figures and texts. his primary media was painting, and eventually sculpture, and these media proved effective at clarifying ambiguity.

  6. attached files
    1. add file
    #### objects and texts <figure> <blockquote> <mark>an image is more like another image than it is like the thing it represents.</mark> </blockquote> <figcaption>suzi gablik: magritte</figcaption> </figure> magritte established a set of working idioms for the ambiguity of [words and images](https://ideophone.org/magritte-on-words-and-images/). for him, these were not problems, but possibilities. ![2]() ![](attachment:375d5f65-cd80-4f39-94d4-5d2020156a1c.png) ![](attachment:81645d85-573d-4bdb-85a7-4d7ee04c3337.png) <figure> <figcaption> excerpts from magritte text and images </figcaption> * a word can take the place of an object in reality * any form whatsoever can replace the image of an object * in a picture, words have the same substance as images. </figure> can we flip this last sentiment to say: _in a text, images have the same substance as words._ these thoughts remind of [alan perlis's _epigrams in programming_] idioms: * one man's constant is another man's variable. * if you have a procedure with ten parameters, you probably missed some. * everything should be built top-down, except the first time. [alan perlis's _epigrams in programming_]: https://www.cs.yale.edu/homes/perlis-alan/quotes.html
    -1
      • objects and texts

        an image is more like another image than it is like the thing it represents.
        suzi gablik: magritte

        magritte established a set of working idioms for the ambiguity of words and images. for him, these were not problems, but possibilities.

        2

        excerpts from magritte text and images
        • a word can take the place of an object in reality
        • any form whatsoever can replace the image of an object
        • in a picture, words have the same substance as images.

        can we flip this last sentiment to say: in a text, images have the same substance as words.

        these thoughts remind of alan perlis's epigrams in programming idioms:

        • one man's constant is another man's variable.
        • if you have a procedure with ten parameters, you probably missed some.
        • everything should be built top-down, except the first time.
  7. attached files
    1. add file
    ### the ambiguity of language is the constant battle ![2]() ![](https://upload.wikimedia.org/wikipedia/commons/d/d6/Saussure_Signifie-Signifiant.png) ![](https://cseweb.ucsd.edu/~ddahlstr/cse271/semiosis.gif) in the early 20th century [ferdindand de saussure](https://en.wikipedia.org/wiki/Ferdinand_de_Saussure) and [charles pierce](https://cseweb.ucsd.edu/~ddahlstr/cse271/peirce.php) began semiotics theories that study signs. in these theories they discovered interfaces that complicate representation: 1. there is ambiguity between the signifier and signified. 2. the position of the viewer matters this is a major problem for technical and scientific enterprises where language is its entirety, and modern art continually finds ways to resolve these ambiguities. for accessibility, language can be a poor technology for communicating the lived experiences of disabled people and assistive technology users. this is where we look to other media to find clarity in the ambiguities. [ferdindand de saussure]: https://en.wikipedia.org/wiki/Ferdinand_de_Saussure [charles pierce]: https://cseweb.ucsd.edu/~ddahlstr/cse271/peirce.php
    -1
      • the ambiguity of language is the constant battle

        2

        in the early 20th century ferdindand de saussure and charles pierce began semiotics theories that study signs. in these theories they discovered interfaces that complicate representation:

        1. there is ambiguity between the signifier and signified.
        2. the position of the viewer matters

        this is a major problem for technical and scientific enterprises where language is its entirety, and modern art continually finds ways to resolve these ambiguities.

        for accessibility, language can be a poor technology for communicating the lived experiences of disabled people and assistive technology users. this is where we look to other media to find clarity in the ambiguities.

  8. attached files
    1. add file
    ### this is not a pipe ... is foucault's analysis of magritte's work, specifically, he is trying to locate the text in the work. and, spoiler alert: you can't smoke a painting. there are at least two chapters relevent to the intersections of art, data, and accessibility. 1. klee, kandinsky, and magritte 2. the unraveled calligram ### klee, kandinsky, and magritte ![2]() ![paul klee's red green and violet yellow rhythms](https://media.tate.org.uk/aztate-prd-ew-dg-wgtail-st1-ctr-data/images/cubicconstruction.width-1440.jpg) ![wassily kandinsky's sky blue](https://substackcdn.com/image/fetch/$s_!zaIQ!,w_1456,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F2650a4b2-de9a-4b3a-9b78-906c2bb9375e_1400x1916.webp) <figure> <figcaption> [foucault in this is not a pipe] </figcaption> <blockquote><mark> And yet Magritte' s art is not foreign to the enterprise of Klee and Kandinsky. Rather it constitutes, facing them and on the basis of a system common to them all, a figure at once opposed and complementary. </mark></blockquote> </figure> foucault compares the efforts of magritte to that of klee and kandinsky. he considers klee's lines, his dots that went for a walk, that come to move like text, and kandisky's synesthetic writings and education on the color harmony amongst points, lines and planes. all of their impacts are textual, and digital accessibility is a textual problem. [foucault in this is not a pipe]: https://monoskop.org/images/9/99/Foucault_Michel_This_Is_Not_a_Pipe.pdf [Wassily Kandinsky's 'Sky Blue' taught me how to look at art- and reminded me that I will never be (truly) alone]: https://ferrsilv.substack.com/p/wassily-kandinskys-sky-blue-taught
    -1
      • this is not a pipe

        ... is foucault's analysis of magritte's work, specifically, he is trying to locate the text in the work. and, spoiler alert: you can't smoke a painting.

        there are at least two chapters relevent to the intersections of art, data, and accessibility.

        1. klee, kandinsky, and magritte
        2. the unraveled calligram

        klee, kandinsky, and magritte

        2 paul klee's red green and violet yellow rhythms wassily kandinsky's sky blue

        foucault in this is not a pipe

        And yet Magritte' s art is not foreign to the enterprise of Klee and Kandinsky. Rather it constitutes, facing them and on the basis of a system common to them all, a figure at once opposed and complementary.

        foucault compares the efforts of magritte to that of klee and kandinsky. he considers klee's lines, his dots that went for a walk, that come to move like text, and kandisky's synesthetic writings and education on the color harmony amongst points, lines and planes. all of their impacts are textual, and digital accessibility is a textual problem.

  9. attached files
    1. add file
    #### margaret lieteritz abstract data visualizations [margarent lieteritz](https://ftn-blog.com/2021/01/14/margaret-leiteritz-1907-1976/) is where we locate data as pure form. ![2]() ![](https://ftn-blog.com/2021/01/14/margaret-leiteritz-1907-1976/schermafbeelding-2020-09-21-om-09-53-56/) ![](https://ftn-blog.com/2021/01/14/margaret-leiteritz-1907-1976/schermafbeelding-2020-09-21-om-09-54-39/) <blockquote><span>Many of her works were strongly influenced by chemical engineering, and especially the field’s graphs which depicted physical properties of substances. </span><mark>Leiteritz’s paintings typically reworked a mundane graph using large expanses of colour and a bold abstract theme, changing it into a dynamic painting</mark><span>. Other works are reminiscent of Bunsen burner flame or DNA gel.</span></blockquote> ![](https://img.sparknews.funkemedien.de/10725889/10725889_1478377529_v16_9_1200.webp) <blockquote><span>Then she devoted herself to diagrams of how they encountered her in her work. She artistically converted the technical drawings into oil.</span> <mark>She designed with colors, with backgrounds, with details.</mark> </blockquote> she was interested in chemical engineering and fully involved with her data. <q>she generated her data, typeset her data, and painted her data.</q> through this intimate experience with different modes of representations we can imagine that margaret felt her work more. she engaged more of her senses then we may now. these are practices we should be able to recover if coding systems help us make the productivity gains they promise. [more work from margaret lieteritz]: https://www.waz.de/staedte/bottrop/kirchhellen/article10725892/hof-juenger-zeigt-albers-schuelerin-margaret-camilla-leiteritz.html
    -1
      • margaret lieteritz abstract data visualizations

        margarent lieteritz is where we locate data as pure form.

        2

        Many of her works were strongly influenced by chemical engineering, and especially the field’s graphs which depicted physical properties of substances. Leiteritz’s paintings typically reworked a mundane graph using large expanses of colour and a bold abstract theme, changing it into a dynamic painting. Other works are reminiscent of Bunsen burner flame or DNA gel.

        Then she devoted herself to diagrams of how they encountered her in her work. She artistically converted the technical drawings into oil. She designed with colors, with backgrounds, with details.

        she was interested in chemical engineering and fully involved with her data. she generated her data, typeset her data, and painted her data.

        through this intimate experience with different modes of representations we can imagine that margaret felt her work more. she engaged more of her senses then we may now. these are practices we should be able to recover if coding systems help us make the productivity gains they promise.

  10. attached files
    1. add file
    #### technical modern art books ![a page from paul klee's notebook](https://upload.wikimedia.org/wikipedia/commons/7/72/Paul_Klee_notebookpages.jpg) modern art is technical movement. ![2]() ![](https://mullenbooks.cdn.bibliopolis.com/pictures/108346.1_01.jpg?width=768&height=1000&fit=bounds&auto=webp&v=1704792438) ![](https://images.pangobooks.com/images/b8c2461c-0aff-4331-86a4-ee2fc8905d05?format=auto&width=1080&quality=85) ![2]() ![](https://covers.openlibrary.org/b/id/6705131-L.jpg) ![](https://exhibitions.bgc.bard.edu/tschichold/files/2019/01/NT_TitlePage-1.png) margaret's works are standalone works of art. however, it is important to look to history to find that she studied with klee, kandinsky, and albers as a student at the bauhaus school. she was being taught at the same time that defining modern art texts were being written. in her works we can see what decades of modern art practice brings to representation of information. some of the important modern art texts of the time are: * paul klee's pedagogical sketchbook * wassily kandinsky's point line and plane * josef alber's interactions of color * jan tischold's the new typography recently, i encountered multiple posts on table accessibility that reference the new typography. these technologies are still relevent. (eg [a responsive accessible table](https://adrianroselli.com/2017/11/a-responsive-accessible-table.html))
    -1
      • technical modern art books

        a page from paul klee's notebook

        modern art is technical movement.

        2

        2

        margaret's works are standalone works of art. however, it is important to look to history to find that she studied with klee, kandinsky, and albers as a student at the bauhaus school. she was being taught at the same time that defining modern art texts were being written. in her works we can see what decades of modern art practice brings to representation of information.

        some of the important modern art texts of the time are:

        • paul klee's pedagogical sketchbook

        • wassily kandinsky's point line and plane

        • josef alber's interactions of color

        • jan tischold's the new typography

          recently, i encountered multiple posts on table accessibility that reference the new typography. these technologies are still relevent. (eg a responsive accessible table)

  11. attached files
    1. add file
    ### the unravelled calligram another important chapter in _this is not a pipe_ discusses calligrams. ![3]() ![shiite calligraphy symbolising ali as tiger of god](https://upload.wikimedia.org/wikipedia/commons/thumb/5/56/Shiite_Calligraphy_symbolising_Ali_as_Tiger_of_God.svg/1280px-Shiite_Calligraphy_symbolising_Ali_as_Tiger_of_God.svg.png) ![calligram by appollinaire](https://upload.wikimedia.org/wikipedia/commons/thumb/2/2b/Calligramme.svg/960px-Calligramme.svg.png) ![](https://upload.wikimedia.org/wikipedia/commons/f/fc/Guillaume_Apollinaire_Calligramme.JPG) in calligraphy, calligrams are often words forming shapes. in foucault's analysis, calligrams are irreducible units of type and form, think labels and axes, or `<label>` and `<input>` elements. they perform three functions: 1. augment the alphabet. 2. repeat something without the aid of rhetoric. 3. trap things into a double cipher. <blockquote><mark>Thus the calligram aspires playfully to efface the oldest oppositions of our alphabetical civilization: to show and to name; to shape and to say; to reproduce and to articulate; to imitate and to signify; to look and to read.</mark></blockquote>
    -1
      • the unravelled calligram

        another important chapter in this is not a pipe discusses calligrams.

        3 shiite calligraphy symbolising ali as tiger of god calligram by appollinaire

        in calligraphy, calligrams are often words forming shapes.

        in foucault's analysis, calligrams are irreducible units of type and form, think labels and axes, or <label> and <input> elements. they perform three functions:

        1. augment the alphabet.
        2. repeat something without the aid of rhetoric.
        3. trap things into a double cipher.
        Thus the calligram aspires playfully to efface the oldest oppositions of our alphabetical civilization: to show and to name; to shape and to say; to reproduce and to articulate; to imitate and to signify; to look and to read.
  12. attached files
    1. add file
    #### data typography ![](attachment:74327747-bc97-4de3-9ea7-4be5f113f7ad.png) data visualization is a typography exercise for folks like [ellen lupton] or [edward tufte] that operate with the same principles as calligrams. we interrogate meaning between the type and form, these double ciphers open up the work and encourage us to spend time with the forms to understand their position. #### visualization principles are lossy when we represent data in pure form we have a tendency to lose essential aspects of the work. the act of visualization creates inaccessibilities. ultimately, the object that data represents is not perceivable, and our work is to make it perceivable. we get to choose the extent to which the object is represented. evenutally, we'll look to the (data) frame to recover the context lost in a visualization. [an old presentation on calligrams]: https://tonyfast.github.io/nbref/src/nbref/example.html?source=https://gist.githubusercontent.com/tonyfast/a1c50b9e2ff6385492245859ca34b053/raw/99bc4c3f3cb640d0c59cef8b7b1cf9c989f1f99d/2019-11-05-calligrams.ipynb
    -1
      • data typography

        data visualization is a typography exercise for folks like [ellen lupton] or [edward tufte] that operate with the same principles as calligrams. we interrogate meaning between the type and form, these double ciphers open up the work and encourage us to spend time with the forms to understand their position.

        visualization principles are lossy

        when we represent data in pure form we have a tendency to lose essential aspects of the work. the act of visualization creates inaccessibilities. ultimately, the object that data represents is not perceivable, and our work is to make it perceivable. we get to choose the extent to which the object is represented.

        evenutally, we'll look to the (data) frame to recover the context lost in a visualization.

  13. attached files
    1. add file
    ### surrealism ![surrealism got nixed from the talk. apologies management.](https://www.shutterstock.com/shutterstock/videos/3447464379/thumb/12.jpg?ip=x480)
    -1
      • surrealism

        surrealism got nixed from the talk. apologies management.

  14. attached files
    1. add file
    ## modern art in america rising facism changed the site of art influence. many, europeans travelled to the united states. black mountain college was a major site of american cultural production. <figure> <blockuote> <mark>In 1933 the Bauhaus closed due to pressure by the Nazi party, and Josef and Anni Albers were invited to teach at Black Mountain College. At Black Mountain, Albers led the innovative visual arts program until 1949. His courses emphasized experimentation with materials and color by doing simple exercises repeatedly and requiring students to rethink the ways they saw the world.</mark> </blockquote> <figcaption> [black mountain college history](<figure>) </figcaption> </figure> it is this experimentation and repetition that i am asking to be practicing after today's talk. at every turn, modern artists experimenting with emerging technologies. and, i'll be asking y'all to recover these repetitive practices to rethink an accessible world.
    -1
      • modern art in america

        rising facism changed the site of art influence. many, europeans travelled to the united states. black mountain college was a major site of american cultural production.

        In 1933 the Bauhaus closed due to pressure by the Nazi party, and Josef and Anni Albers were invited to teach at Black Mountain College. At Black Mountain, Albers led the innovative visual arts program until 1949. His courses emphasized experimentation with materials and color by doing simple exercises repeatedly and requiring students to rethink the ways they saw the world.

        black mountain college history

        it is this experimentation and repetition that i am asking to be practicing after today's talk.

        at every turn, modern artists experimenting with emerging technologies. and, i'll be asking y'all to recover these repetitive practices to rethink an accessible world.

  15. attached files
    1. add file
    ### woven histories ![](https://upload.wikimedia.org/wikipedia/commons/a/a7/Inca_Quipu.jpg) in 1965, Anni Albers wrote <q>Threads were among the earliest transmitters of meaning</q>. we find that to be of the utmost truth in the [inka empire's quipu knots](https://www.si.edu/collections/snapshot/quipu). ![2]() ![](https://boutique.gallery.ca/cdn/shop/files/9780226827292_Woven_Histories_1.jpg?v=1728663359) ![](https://www.nga.gov/sites/default/files/styles/image_scale__sm-md/public/migrate_images/content/dam/ngaweb/features/slideshows/woven-histories--textiles-and-modern-abstraction/anni-albers-design-unexecuted-wall-hanging.jpg?itok=gChi_Eac) [Woven Histories: Textiles and Modern Abstraction] is a modern art exhibit with several black mountain college residents (eg anni albers, ruth asawa). this exhibit shows how textiles touch us all and connect us to history. ![](https://ruthasawa.com/wp-content/uploads/2024/10/ra-sculptures@0.5x.webp) ![2]() ![](https://galileo-unbound.blog/wp-content/uploads/2023/06/diagram_for_the_computation_of_bernoulli_numbers.jpg?w=1024) ![](https://www.nga.gov/sites/default/files/styles/image_scale__sm-md/public/migrate_images/content/dam/ngaweb/features/slideshows/woven-histories--textiles-and-modern-abstraction/marilou-schultz-replica-chip.jpg?itok=llIjyubF) it is here that we find another confluence and computing. we observe [marilou schultz's (Navajo/Diné), replica of a chip] reminding us that textiles and algorithmic practices connect with ada lovelace and the origins of computing history. does this relate to calligraphy? let me weave you a story. <figure> <blockquote> <mark>the word “text” originated from the Latin word “textus,” which means “a weaving” or “a fabric.”</mark> </blockquote> <figcaption> [letterform archive: threading letters](https://letterformarchive.org/news/threading-letters/) </figcaption> </figure> [Woven Histories: Textiles and Modern Abstraction]: https://www.nga.gov/exhibitions/woven-histories-textiles-and-modern-abstraction [marilou schultz's (Navajo/Diné), replica of a chip]: #
    -1
      • woven histories

        in 1965, Anni Albers wrote Threads were among the earliest transmitters of meaning. we find that to be of the utmost truth in the inka empire's quipu knots.

        2

        Woven Histories: Textiles and Modern Abstraction is a modern art exhibit with several black mountain college residents (eg anni albers, ruth asawa). this exhibit shows how textiles touch us all and connect us to history.

        2

        it is here that we find another confluence and computing. we observe marilou schultz's (Navajo/Diné), replica of a chip reminding us that textiles and algorithmic practices connect with ada lovelace and the origins of computing history.

        does this relate to calligraphy? let me weave you a story.

        the word “text” originated from the Latin word “textus,” which means “a weaving” or “a fabric.”

        letterform archive: threading letters

  16. attached files
    1. add file
    ### the museum of modern art the museum of modern art is a museum and brand that frames enormous wealth. it is an intersectional space for the concerns of art, data, and access; some of them are relevent to our technical accessibility and data interests. ![2]() ![png](attachment:5ee56d0b-9b9f-4ccf-97b6-3de89f5ee46f.png) ![](attachment:80c918d3-f3bb-4cd8-8d87-9c4cba207225.png) when i visited in the summer of 2025 i finally saw [rebecca allen's girl lifts skirt], and could feel a deep current of art and computing history run through., apropos of nothing, it just above [kazuo kawasaki's carna folding wheelchair]. however, is there nothing to reference or did the curator decide there was! <figure> <blockquote><mark> Older people, handicapped and normal people are separated in today's Japan, so designers need to make designs that are kind and caring and need to treat more handicapped people equally in society. . . . To be a visionary designer I want to design products for myself first." </mark></blockquote> <figcaption>kazuo kawasaki</figcaption> </figure> ![](https://history.siggraph.org/wp-content/uploads/2023/11/2023-Art-Gallery-Allen_Retrospective-of-Female-Digital-Art-Pioneers.jpg) computing history is embedded in the MOMA collection. it moma holds works from at least five artists from ACM SIGGRAPH's [retrospective on digital female art pioneers]. [retrospective on digital female art pioneers]: https://history.siggraph.org/artwork/rebecca-allen-copper-frances-giloth-darcy-gerbarg-colette-bangert-joan-r-truckenbrod-barbara-nessim-jane-veeder-retrospective-of-female-digital-art-pioneers/ "Older people, handicapped and normal people are separated in today's Japan, so designers need to make designs that are kind and caring and need to treat more handicapped people equally in society. . . . To be a visionary designer I want to design products for myself first." [rebecca allen's girl lifts skirt]: https://www.moma.org/artists/33372-rebecca-allen [kazuo kawasaki's carna folding wheelchair]: https://www.moma.org/collection/works/1512
    -1
      • the museum of modern art

        the museum of modern art is a museum and brand that frames enormous wealth. it is an intersectional space for the concerns of art, data, and access; some of them are relevent to our technical accessibility and data interests.

        2 png

        when i visited in the summer of 2025 i finally saw rebecca allen's girl lifts skirt, and could feel a deep current of art and computing history run through.,

        apropos of nothing, it just above kazuo kawasaki's carna folding wheelchair. however, is there nothing to reference or did the curator decide there was!

        Older people, handicapped and normal people are separated in today's Japan, so designers need to make designs that are kind and caring and need to treat more handicapped people equally in society. . . . To be a visionary designer I want to design products for myself first."
        kazuo kawasaki

        computing history is embedded in the MOMA collection. it moma holds works from at least five artists from ACM SIGGRAPH's retrospective on digital female art pioneers.

        "Older people, handicapped and normal people are separated in today's Japan, so designers need to make designs that are kind and caring and need to treat more handicapped people equally in society. . . . To be a visionary designer I want to design products for myself first."

  17. attached files
    1. add file
    #### dear data other relevent data works include giorgia lupi and stefanie posavec's hand drawn, bespoke [dear data] post card communications. ![](attachment:77fe93d1-3813-4c5c-b961-1b48f3a4d9ce.png) ![](http://silas.psfc.mit.edu/Maxwell/postcard.jpg) these techniques are correspondences between [george maxwell letter with edward tait] as maxwell's equations were developed. [dear data]: https://www.dear-data.com/theproject [george maxwell letter with edward tait]: http://silas.psfc.mit.edu/Maxwell/
    -1
      • dear data

        other relevent data works include giorgia lupi and stefanie posavec's hand drawn, bespoke dear data post card communications.

        these techniques are correspondences between george maxwell letter with edward tait as maxwell's equations were developed.

  18. attached files
    1. add file
    #### never alone ![2]() ![](https://www.moma.org/d/c/installation_images/W1siZiIsIjUyNDk5NyJdLFsicCIsImNvbnZlcnQiLCItcXVhbGl0eSA5MCAtcmVzaXplIDIwMDB4MjAwMFx1MDAzZSJdXQ.jpg?sha=46046ce7dc29e039) ![](https://upload.wikimedia.org/wikipedia/en/8/8a/Never_Alone_Box_Art%2C_Box_art_1080x1080.png) _never alone_ refers to two things: 1. [a MOMA exhibition on video games and interactive design](https://www.moma.org/calendar/exhibitions/5453) 2. [a video game created in collaboration with iñupiat alaska natives to share their storied histories](https://www.neveralonegame.com/) now video games are a relevent art and we can pull from their history to make accessible things. i find that that [video game accessibility guidelines](https://gameaccessibilityguidelines.com/) inform my decisions when web content accessibility guidelines are unclear.
    -1
      • never alone

        2

        never alone refers to two things:

        1. a MOMA exhibition on video games and interactive design
        2. a video game created in collaboration with iñupiat alaska natives to share their storied histories

        now video games are a relevent art and we can pull from their history to make accessible things. i find that that video game accessibility guidelines inform my decisions when web content accessibility guidelines are unclear.

  19. attached files
    1. add file
    ## post-modernism and <q>the death of the author</q> in a connected world technology was disruptive to the 1960s. it where we find the death of the author, ted nelson's hypertext/hypermedia, doug englebart's the mother of all demos, and post-modernism. > anti-authoritarian by nature, postmodernism refused to recognise the authority of any single style or definition of what art should be. It collapsed the distinction between high culture and mass or popular culture, between art and everyday life. > https://www.tate.org.uk/art/art-terms/p/postmodernism ![](https://newlearningonline.com/assets/uploads/gallery/barthes.png) who makes the meaning? barthes contends that "to give a text an author" and assign a single, corresponding interpretation to it "is to impose a limit on that text." this asks the author to consider the position of the reader relative to the work, and allows us to think how we can orient a text nearer to our viewers.
    -1
      • post-modernism and the death of the author in a connected world

        technology was disruptive to the 1960s. it where we find the death of the author, ted nelson's hypertext/hypermedia, doug englebart's the mother of all demos, and post-modernism.

        anti-authoritarian by nature, postmodernism refused to recognise the authority of any single style or definition of what art should be. It collapsed the distinction between high culture and mass or popular culture, between art and everyday life. https://www.tate.org.uk/art/art-terms/p/postmodernism

        who makes the meaning? barthes contends that "to give a text an author" and assign a single, corresponding interpretation to it "is to impose a limit on that text." this asks the author to consider the position of the reader relative to the work, and allows us to think how we can orient a text nearer to our viewers.

  20. attached files
    1. add file
    ## deconstructed frames post-modernism ruptured conventional frames of meaning of the author and artist. two places where we see advances in frame theory are: 1. [marvin minsky's "frame work for knowledge"] promoted frames as a technique for artificial intelligence. <blockquote><mark>A frame is a data-structure for representing a stereotyped situation, like being in a certain kind of living room, or going to a child's birthday party.</mark></blockquote> <blockquote><mark>Winograd (1974) discusses the recent trend, in theories of Artificial Intelligence, toward frame-like ideas.</mark></blockquote> 1. jacques derrida deconstruction of kant's aesthetics shows that the frame is part of the work, it represents the parergon, the work around the work <blockquote><mark>parergon also means the exceptional, the strange, the extra-ordinary</mark></blockquote> ![](attachment:0124b2e2-1292-4632-85a5-c0153734a3b2.png) <figure> <figcaption>this pull quote referenced in ellen lupton's elements of typography demonstrates derrida's radical deconstructions. </figcaption> <blockquote><mark>the frame... disappears, buries itself, effaces itself, melts away at the moment it deploys its greatest energy. the frame is in no way a background... but neither is its thickness as margin a figure. or at least it is a figure that comes away of its own accord. jacques derrida, 1987</mark></blockquote> </figure> for derrida, the frame represents part of the work, it represents the work around the work, the omissions, the context. <figure> <blockquote> <mark>the function of the work of art-any work of art-is to conceal the multiple frames within which it is contained</mark> </blockquote> <figcaption> [craig owens: beyond representation] </figcaption> </figure> [marvin minsky's "frame work for knowledge"]: https://courses.media.mit.edu/2004spring/mas966/Minsky%201974%20Framework%20for%20knowledge.pdf [craig owens: beyond representation]: #
    -1
      • deconstructed frames

        post-modernism ruptured conventional frames of meaning of the author and artist. two places where we see advances in frame theory are:

        1. marvin minsky's "frame work for knowledge" promoted frames as a technique for artificial intelligence.

          A frame is a data-structure for representing a stereotyped situation, like being in a certain kind of living room, or going to a child's birthday party.
          Winograd (1974) discusses the recent trend, in theories of Artificial Intelligence, toward frame-like ideas.
        2. jacques derrida deconstruction of kant's aesthetics shows that the frame is part of the work, it represents the parergon, the work around the work

          parergon also means the exceptional, the strange, the extra-ordinary

          this pull quote referenced in ellen lupton's elements of typography demonstrates derrida's radical deconstructions.
          the frame... disappears, buries itself, effaces itself, melts away at the moment it deploys its greatest energy. the frame is in no way a background... but neither is its thickness as margin a figure. or at least it is a figure that comes away of its own accord. jacques derrida, 1987

          for derrida, the frame represents part of the work, it represents the work around the work, the omissions, the context.

        the function of the work of art-any work of art-is to conceal the multiple frames within which it is contained

        craig owens: beyond representation

  21. attached files
    1. add file
    ## the disintegrating frame we're talking about the works framed by museums, but what is outside the frame? ![](attachment:774dcf4c-3381-4f31-a3d1-2a578cb1f486.png) <blockquote><span>the shock of recognition!</span> <mark>in an electric information environment, minority groups can no longer be contained- ignored. too many people know too much about each other. our new environment compels commitment and participation. we have become irrevocably involved wit, and repsonsible for, each other.</mark></blockquote>
    -1
      • the disintegrating frame

        we're talking about the works framed by museums, but what is outside the frame?

        the shock of recognition! in an electric information environment, minority groups can no longer be contained- ignored. too many people know too much about each other. our new environment compels commitment and participation. we have become irrevocably involved wit, and repsonsible for, each other.
  22. attached files
    1. add file
    ### the benefits of wearing a mask ![2]() ![](attachment:4cd4da7d-6eba-4b60-91a2-d66ecf7b2b58.png) ![](https://images.squarespace-cdn.com/content/v1/55d4aaa8e4b084df273878ef/1526517383145-NBMPX5M0FRGFQ30XUYU2/2015GuerillaGirls-IcelandBillboard.jpg?format=750w) the guerrilla girls are an anonymous, international collective has that been making the nonvisible visible for decades. moreover, they are a statistics project elevating the un and under represented artists. <figure> <blockquote><mark>you can't believe what comes out of your mouth when you wear a gorilla mask</mark></blockquote> <figcaption> frida khalo of the guerrilla girls </figcaption> </figure> the [guerrilla girls](https://www.inforum.com/lifestyle/arts-and-entertainment/masked-guerrilla-girls-urge-creative-activism-during-plains-art-museum-talk) gorilla masks disrupt the frame and regain power with the right mask.
    -1
      • the benefits of wearing a mask

        2

        the guerrilla girls are an anonymous, international collective has that been making the nonvisible visible for decades. moreover, they are a statistics project elevating the un and under represented artists.

        you can't believe what comes out of your mouth when you wear a gorilla mask
        frida khalo of the guerrilla girls

        the guerrilla girls gorilla masks disrupt the frame and regain power with the right mask.

  23. attached files
    1. add file
    #### some selected guerilla girls works these two works are chosen to demonstrate how we can think about creating accessible representations of the information in modern and activist art. don't they deserve better than just alt text? ![](https://images.squarespace-cdn.com/content/v1/55d4aaa8e4b084df273878ef/1617502836033-NX5VUAVBBBXFYVQFKJE6/2018_GuerrillaGirls_MoMALovesDada_1500at150dpi.jpg) <figure> <figcaption>MOMA loves dada not mama</figcaption> 1. chief curator at MoMA PS1 makes, then withdraws, job offer to a woman after she has a baby. 2. woman files complaint, wins, and MoMA PS1 is forced to change its policies. 3. the upshot: she's unemployed, but when chief curator became a dad he got parental leave! <figcaption>a message from the guerrilla girls</figcaption> [MoMA PS1 Settles With Curator Who Said Giving Birth Cost Her Job Offer](https://www.nytimes.com/2019/03/26/arts/design/moma-ps1-settles-with-curator-who-said-giving-birth-cost-her-job-offer.html) </figure> <figure> ![](https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTCLTDgL-WgUfQPcKucSa3_iFZc-e3S3S_0nA&s) <table> <caption>how many women had one-person exhibitions at nyc museums last year?</caption> <tr><td>guggenheim </td><td>0</td></tr> <tr><td>metropolitan</td><td>0</td></tr> <tr><td>modern</td><td>1</td></tr> <tr><td>whitney</td><td>0</td></tr> </table> </figure>
    -1
      • some selected guerilla girls works

        these two works are chosen to demonstrate how we can think about creating accessible representations of the information in modern and activist art. don't they deserve better than just alt text?

        MOMA loves dada not mama
        1. chief curator at MoMA PS1 makes, then withdraws, job offer to a woman after she has a baby.
        2. woman files complaint, wins, and MoMA PS1 is forced to change its policies.
        3. the upshot: she's unemployed, but when chief curator became a dad he got parental leave!
        a message from the guerrilla girls

        MoMA PS1 Settles With Curator Who Said Giving Birth Cost Her Job Offer

        how many women had one-person exhibitions at nyc museums last year?
        guggenheim 0
        metropolitan0
        modern1
        whitney0
  24. attached files
    1. add file
    ### progress at the whitney ![3]() ![](https://whitneymedia.org/assets/image/831999/medium_1016590-1-copy.jpg) ![](https://whitneymedia.org/assets/image/832434/medium_Screenshot-2025-05-22-at-3.30.00-PM.jpg) ![](https://whitneymedia.org/assets/image/832126/large_WMAA90186_2.-Trans-Forming-Liberty_2024_hi-res_KB.jpg) while in new york i was so happy to see [christine sun kim's "all day, all night"] and [amy sherald's "american sublime"] at the whitney art museum. every floor was amazing. <mark> all these histories feel deeply intertwined. remember that the guerrilla girls made the lack of women visible, the whitney showed zero women artists, and now we can find two woman of color showing simultaneously at the whitney. progress! </mark> ### christine sun kim "all day, all night" we are privileged to experience christine sun kim's art. her position as a profoundly deaf artist gives us a glimpse into accessibility first art and exhibition. despite a lack of hearing, her exhibition is full of sound, the musicality jumps along the walls and in between frames. ![2]() ![](https://whitneymedia.org/assets/image/831848/medium_WMAA88416_2018_Degrees_of_my_Deaf_Rage_in_the_Art_World_Ghebaly.jpg) ![](https://d2u3kfwd92fzu7.cloudfront.net/asset/cms/Art_Basel_Hong_Kong_2022_Christine_Sun_Kim_15.jpg) her framed visualizations use simple materials to communicate difficult information. for example, several rooms included tactiles with braille: ![3]() ![](https://whitneymedia.org/assets/image/832019/large_WMAA90209_CHRISTINE-SUN-KIM_26_PS-03.jpg) ![](attachment:31da141a-f54b-48da-afbf-f91bf44b5445.png) ![](attachment:8d5d6c6c-71e1-47fd-a1b1-29629aa23b6f.png) [amy sherald's "american sublime"]: https://whitney.org/exhibitions/amy-sherald [christine sun kim's "all day, all night"]: https://whitney.org/exhibitions/christine-sun-kim-all-day-all-night
    -1
      • progress at the whitney

        3

        while in new york i was so happy to see christine sun kim's "all day, all night" and amy sherald's "american sublime" at the whitney art museum. every floor was amazing.

        all these histories feel deeply intertwined. remember that the guerrilla girls made the lack of women visible, the whitney showed zero women artists, and now we can find two woman of color showing simultaneously at the whitney. progress!

        christine sun kim "all day, all night"

        we are privileged to experience christine sun kim's art. her position as a profoundly deaf artist gives us a glimpse into accessibility first art and exhibition. despite a lack of hearing, her exhibition is full of sound, the musicality jumps along the walls and in between frames.

        2

        her framed visualizations use simple materials to communicate difficult information.

        for example, several rooms included tactiles with braille:

        3

  25. attached files
    1. add file
    #### ghosted @ UW christine sun kim might be familiar to y'all from her [ghosted] installation outside the university of washington's at Henry Hall with an imagine of the christine sun kim's exhibition book in the foreground. ![](attachment:d76b1c5d-72ee-48e9-b9b5-7205fa45b611.png)
    -1
      • ghosted @ UW

        christine sun kim might be familiar to y'all from her [ghosted] installation outside the university of washington's at Henry Hall with an imagine of the christine sun kim's exhibition book in the foreground.

  26. attached files
    1. add file
    ## <dfn>parergon</dfn> the work around the work <blockquote><mark>parergon also means the exceptional, the strange, the extra-ordinary</mark></blockquote> walking the frame's philosophical razor's edge let's us consider aesthetics without judgement. on one side is pure outside with the percievable on the other. it is when we teeter along the frame we can find the work around the work, the parergon. along the frame we can work towards _meeting people (the artist) where they are_ within their materials in their [time and space]. it is here in a museum we can think of who is afforded access to these works, or not. multiple frames start to reveal themselves in a very familiar way to the multiple frames in minsky's theories. [time and space]: https://www.altogetherautism.org.nz/a-time-and-space-for-takiwatanga/ <!-- you need to yell louder so people can see! -->
    -1
      • parergon the work around the work

        parergon also means the exceptional, the strange, the extra-ordinary

        walking the frame's philosophical razor's edge let's us consider aesthetics without judgement. on one side is pure outside with the percievable on the other. it is when we teeter along the frame we can find the work around the work, the parergon.

        along the frame we can work towards meeting people (the artist) where they are within their materials in their time and space. it is here in a museum we can think of who is afforded access to these works, or not. multiple frames start to reveal themselves in a very familiar way to the multiple frames in minsky's theories.

  27. attached files
    1. add file
    ## on ~~reproduction~~ replication <blockquote><mark>In principle a work of art has always been reproducible.</mark></blockquote> [walter benjamin - The Work of Art in the Age of Mechanical Reproduction] reproduction, or replication, allows us to stand on the frame, to practice the work, and during the process we find time for complete sensory engagement. does this make reproducible science an art? if so, then what role does the artist have? [walter benjamin - The Work of Art in the Age of Mechanical Reproduction]: https://www.marxists.org/reference/subject/philosophy/works/ge/benjamin.htm
    -1
      • on ~~reproduction~~ replication

        In principle a work of art has always been reproducible.

        walter benjamin - The Work of Art in the Age of Mechanical Reproduction

        reproduction, or replication, allows us to stand on the frame, to practice the work, and during the process we find time for complete sensory engagement.

        does this make reproducible science an art? if so, then what role does the artist have?

  28. attached files
    1. add file
    #### sturtevant art history is full of artists reproducing prior works (eg [manet](https://blog.artsper.com/en/a-closer-look/how-manet-changed-art-history/)), not unlike the practice of homework or remaking data visualizations to understand the medium. [sturtevant] is a unique modern conceptual artist with a restrospective at the MOMA called [double trouble](https://www.moma.org/calendar/exhibitions/1454). sturtevant's works look familiar, but they are not copies. they just look that way... they are studies of the work. sturtevant mastered each medium to create full ranges of works, and documented the process in many media as it took shape. sturtevant's art was all about the work, the process, and the medium. all with an overarching question <q>what if a woman authored the work?</q> as all the works she reproduced were men. ![2]() ![black marilyn a warhol replication](attachment:7b50dda4-6ee6-4c61-b01b-2536cdcd1678.png) ![a replication of jasper johns white numbers](https://www.christies.com/img/LotImages/2011/NYR/2011_NYR_02442_0370_000(sturtevant_johns_white_numbers040148).jpg) [sturtevant video]: https://www.youtube.com/watch?v=LhKFraTE9_I <!-- One can think of everything as already a duplicate, but on one condition: there is no unique sense of duplication. Artists all have their own use for the copy, as part of the continuing puzzle of modern art. www.haberarts.com/sturtev.htm https://www.christies.com/en/lot/lot-5437564 https://www.haberarts.com/sturtev.htm --> [sturtevant]: https://d2u3kfwd92fzu7.cloudfront.net/asset/cms/Art_Basel_Hong_Kong_2022_Christine_Sun_Kim_15.jpg
    -1
      • sturtevant

        art history is full of artists reproducing prior works (eg manet), not unlike the practice of homework or remaking data visualizations to understand the medium.

        sturtevant is a unique modern conceptual artist with a restrospective at the MOMA called double trouble.

        sturtevant's works look familiar, but they are not copies. they just look that way... they are studies of the work.

        sturtevant mastered each medium to create full ranges of works, and documented the process in many media as it took shape.

        sturtevant's art was all about the work, the process, and the medium. all with an overarching question what if a woman authored the work? as all the works she reproduced were men.

        2 black marilyn a warhol replication a replication of jasper johns white numbers

  29. attached files
    1. add file
    ### so what frames a visualization? the answer to this question depends on the site and the material. in the digital sense, text frames a visualization. inaccessibilities arise because of a lack of text, whether formal or programmatic language. in the practical sense, the `document` frames a visualization, then the tab, then the browser, then the operating system, then the assistive technology. all of these frames need to be understood to test and remediate accessibility. we can consider all these modern art techniques when developing accessible digital technologies.
    -1
      • so what frames a visualization?

        the answer to this question depends on the site and the material.

        in the digital sense, text frames a visualization. inaccessibilities arise because of a lack of text, whether formal or programmatic language.

        in the practical sense, the document frames a visualization, then the tab, then the browser, then the operating system, then the assistive technology. all of these frames need to be understood to test and remediate accessibility.

        we can consider all these modern art techniques when developing accessible digital technologies.

  30. attached files
    1. add file
    ## making accessible technology using modern art techniques. i'm encouraging y'all to get into the work. spend time making something to activate your available senses. heightening these awarenesses helps create more _perceivable_ content, more accessible experiences. <figure> ![](https://thirddrawerdown.co.uk/cdn/shop/products/Modern-Art-Tea-Towel_craig-Damrauer_TDDS.jpg?v=1648105998&width=1000) <figcaption> <mark>modern art</mark> equals <mark>i could do that</mark> plus <mark>yea, but you didn't</mark> <a href="https://assortedbitsofwisdom.com/">craig damrauer</a> </figcaption> </figure> we've demonstrated how modern art techniques can offer insight and engagement with a work. we have access to all of art history, hell most of it is crammed in the browser, this places us at a unique time to make meaningful material and non-materials works.
    -1
      • making accessible technology using modern art techniques.

        i'm encouraging y'all to get into the work. spend time making something to activate your available senses. heightening these awarenesses helps create more perceivable content, more accessible experiences.

        modern art equals i could do that plus yea, but you didn't craig damrauer

        we've demonstrated how modern art techniques can offer insight and engagement with a work. we have access to all of art history, hell most of it is crammed in the browser, this places us at a unique time to make meaningful material and non-materials works.

  31. attached files
    1. add file
    ### practicing designing accessible content hopefully, at this point, we've understood that some paintings are meant to be read and some are meant to be written. we can begin to look at visualizations with [soft eyes] throught the work, we can go beyond reading visualization to viewing to making. * a truly assistive unit takes time, work, and practice. * digital accessibility is an exercise in text. make sure that the implicit is explicit in accessible contexts. * build from html basics. `html` is the most assistive standard for developers building accessible web content. using html semantics properly will get us closer the accessible solutions than going the javascript route. * learn what you can and cannot do with css. * learn your screen reader. you have at least one. * learn aria techniques to modify how visual information sounds while considering [aria rules](https://www.w3.org/TR/using-aria/#rule1) * [let evil rot](https://github.com/Heydon/principles-of-web-accessibility?tab=readme-ov-file#let-evil-rot) * consider how to make the work percievable visually, audibly, and tactilely. * consider how to make the work operable with keyboard, with touch, with screen reader, with game control. * think about how an object would be made in different materials and methods. * overall, the most costly aspect of designing for accessibility is leaving it to the end. * set up [open broadcaster software](https://obsproject.com/) to start streaming or recording videos. [soft eyes]: https://en.wikipedia.org/wiki/Soft_Eyes
    -1
      • practicing designing accessible content

        hopefully, at this point, we've understood that some paintings are meant to be read and some are meant to be written. we can begin to look at visualizations with soft eyes throught the work, we can go beyond reading visualization to viewing to making.

        • a truly assistive unit takes time, work, and practice.
        • digital accessibility is an exercise in text. make sure that the implicit is explicit in accessible contexts.
        • build from html basics. html is the most assistive standard for developers building accessible web content. using html semantics properly will get us closer the accessible solutions than going the javascript route.
        • learn what you can and cannot do with css.
        • learn your screen reader. you have at least one.
        • learn aria techniques to modify how visual information sounds while considering aria rules
        • let evil rot
        • consider how to make the work percievable visually, audibly, and tactilely.
        • consider how to make the work operable with keyboard, with touch, with screen reader, with game control.
        • think about how an object would be made in different materials and methods.
        • overall, the most costly aspect of designing for accessibility is leaving it to the end.
        • set up open broadcaster software to start streaming or recording videos.
  32. attached files
    1. add file
    ### exercises all of this is about practicing html. we'll make our pdf from the html. javascript just changes the html, it changes what the document sounds like. * make a `self` portrait, or make a portrait of `this`, in python or javascript * practice css by finding interesting type settings examples. * make a site, make a notebook, make a zine, make a comic, make a video * recreate palettes from iteractions of color ![palettes from josef alber's interactions of color](https://d7hftxdivxxvm.cloudfront.net/?quality=80&resize_to=width&src=https%3A%2F%2Fd32dm0rphc51dk.cloudfront.net%2FmEh-Fz_vrXNT7LNGlvXqJg%2Fnormalized.jpg&width=910)
    -1
      • exercises

        all of this is about practicing html. we'll make our pdf from the html. javascript just changes the html, it changes what the document sounds like.

        • make a self portrait, or make a portrait of this, in python or javascript
        • practice css by finding interesting type settings examples.
        • make a site, make a notebook, make a zine, make a comic, make a video
        • recreate palettes from iteractions of color

        palettes from josef alber's interactions of color

  33. attached files
    1. add file
    ### some of my practices
    -1
      • some of my practices

  34. attached files
    1. add file
    #### tangle and weave tangle and weave is a reference to [donald knuth's literate programming] that encourages <mark>considering programs to be works of literature.</mark> sometimes i stream on [youtube as tangle and weave](https://www.youtube.com/tangleandweave). * [practice ability](https://github.com/tonyfast/tonyfast/blob/main/tonyfast/xxiv/2025-05-01-present-small.ipynb) - a talk on a applying data visualization accessibility guidelines * [calligraphy with assistive technologies] ![ally hood written with parallel pilot pens and 4 differents accessibility aids](attachment:f991cfc6-1b9b-4a98-94aa-548fc3b0a9ea.png) [calligraphy with assistive technologies]: https://studio.youtube.com/video/RdTGYJn7SEA/edit [donald knuth's literate programming]: http://www.literateprogramming.com/knuthweb.pdf
    -1
      • tangle and weave

        tangle and weave is a reference to donald knuth's literate programming that encourages considering programs to be works of literature.

        sometimes i stream on youtube as tangle and weave.

  35. attached files
    1. add file
    %% #### reproductions <details> <summary>reproduction duchamp videos</summary> <iframe height="300" style="width: 100%;" scrolling="no" title="r.mutt" src="https://codepen.io/tonyfast/embed/GgqEOpM?default-tab=result&editable=true" frameborder="no" loading="lazy" allowtransparency="true"> See the Pen <a href="https://codepen.io/tonyfast/pen/GgqEOpM"> r.mutt</a> by Tony Fast (<a href="https://codepen.io/tonyfast">@tonyfast</a>) on <a href="https://codepen.io">CodePen</a>. </iframe> </details> ![](https://rauschenbergfoundation.org/sites/default/files/styles/media_library/public/2025-03/51.006_00.jpg?itok=wnOX2kug) <details> <summary>reproducing two blank canvases</summary> <iframe height="300" style="width: 100%;" scrolling="no" title="woven css" src="https://codepen.io/tonyfast/embed/ogLxRGQ?default-tab=result&editable=true" frameborder="no" loading="lazy" allowtransparency="true"> See the Pen <a href="https://codepen.io/tonyfast/pen/ogLxRGQ"> woven css</a> by Tony Fast (<a href="https://codepen.io/tonyfast">@tonyfast</a>) on <a href="https://codepen.io">CodePen</a>. </iframe> </details> <details> <summary>progressive enhancement of tables to visualzations</summary> <iframe src="https://tonyfast.github.io/tonyfast/draft/tonyfast/tonyfast/tonyfast/xxiv/2024-08-21-progressive.html#plot" style="width: 100%; height: 600px"> </details>
    14
      • reproductions

        reproduction duchamp videos

        reproducing two blank canvases
        progressive enhancement of tables to visualzations
  36. attached files
    1. add file
    ##### bauhaus optical illusions ![image.png](attachment:255d184a-e125-44c1-95c0-894177ee766c.png) * [original](https://nbviewer.org/github/tonyfast/tonyfast/blob/042a0aa50b96b193855e84fc174491003af4b9d4/tonyfast/xxiv/2025-06-09-illusion.ipynb) * [video variant](https://nbviewer.org/github/tonyfast/tonyfast/blob/042a0aa50b96b193855e84fc174491003af4b9d4/tonyfast/xxiv/2025-06-10-illusion.ipynb)
    -1
      • bauhaus optical illusions

        image.png

  37. attached files
    1. add file
    #### how could i make my calligraphy more of a digital experience? there are points where alt text doesn't suffice anymore. when there are layers we need more information. these complex scenarios take practice. ![image.png](attachment:d4fe27b7-48ba-48a8-926d-765fd6a9f63d.png) #### how can we make data experiences more tactile, like tactile maps? ![IMG_2829.jpeg](attachment:a227b7d3-438e-4211-a619-9acf5980599f.jpeg)
    -1
      • how could i make my calligraphy more of a digital experience?

        there are points where alt text doesn't suffice anymore. when there are layers we need more information. these complex scenarios take practice.

        image.png

        how can we make data experiences more tactile, like tactile maps?

        IMG_2829.jpeg

  38. attached files
    1. add file
    what if we started thinking of visualization through glass? how does external light interact with the glass? what could shadows acheive in data representation?
    -1
      • what if we started thinking of visualization through glass? how does external light interact with the glass? what could shadows acheive in data representation?

  39. attached files
    1. add file
    <figure> <figcaption>a salvadore dali glass diorama from the MOMA</figcaption> ![IMG_2564.jpeg](attachment:7b64def9-0466-4549-a774-f5e08b9e72af.jpeg) </figure>
    -1
      • a salvadore dali glass diorama from the MOMA

        IMG_2564.jpeg

  40. attached files
    1. add file
    #### exercises in css
    -1
      • exercises in css

  41. attached files
    1. add file
    [aligning decimals with pure css](https://tonyfast.github.io/tonyfast/draft/tonyfast/tonyfast/tonyfast/xxiv/2024-08-23-align.html)
    -1
      • aligning decimals with pure css

  42. attached files
    1. add file
    ![blur]() ![image.png](attachment:17c355ba-0b88-45eb-b578-4f68ec119a59.png) [a vulgar word cloud](https://tonyfast.github.io/tonyfast/draft/tonyfast/tonyfast/tonyfast/xxiv/2024-04-12-word-cloud.html) [nonvisual data frames and heat maps](https://tonyfast.github.io/tonyfast/draft/tonyfast/tonyfast/tonyfast/xxiv/2024-06-20-stream.html) ![image.png](attachment:4d98ce97-8b4f-4b5a-babd-cc69386512d2.png) [dr dilettante](https://tonyfast.github.io/tonyfast/draft/tonyfast/tonyfast/tonyfast/xxiv/2024-07-14-dr-dilettante.html)
    -1
      • blur image.png

        a vulgar word cloud

        nonvisual data frames and heat maps

        image.png

        dr dilettante

  43. attached files
    1. add file
    ![image.png](attachment:ca0a11c2-cf4e-40c6-868a-3ce29558584f.png) [multiple embeddings of diagram from a `table`](https://tonyfast.github.io/tonyfast/draft/tonyfast/tonyfast/tonyfast/xxiv/2024-08-15-graph.html)
    -1
      • image.png

        multiple embeddings of diagram from a table

  44. attached files
    1. add file
    that one time i made plots of video points ![2]() ![](attachment:866e6302-0121-47c9-906b-77707eb3d87c.png) ![](attachment:e057e2af-bf38-47ab-9d64-ab3a5d2ea67f.png) ![](attachment:6ee53af6-13cf-4276-a6a2-c7ba5644cd06.png)
    -1
      • that one time i made plots of video points

        2

  45. attached files
    1. add file
    ## marginalia
    -1
      • marginalia

  46. attached files
    1. add file
    %% <details><summary>presentation styling</summary> display\ ```css .no-pres { display: none; } span.c::after { content: ";"; } /** the presentation version shows marked blockquotes **/ blockquote > :not(mark) { display: none; } :is(img[alt="2"], img[alt="4"]) { display: none; & + img { &, & + img, & + img + img + img { max-width: 40%; } } } :is(img[alt="3"], img[alt="6"]) { display: none; & + img { &, & + img, & + img, & + img + img { max-width: 30%; } } } img { max-height: 600px; } img[src$=".svg.png"] { background: white; } img[alt=blur] + img { filter: blur(.25rem); } summary.output { display: none; } </style> ``` </details>
    13
      • '.no-pres {\n    display: none;\n}\nspan.c::after {\n    content: ";";\n}\n/** the presentation version shows marked blockquotes **/\nblockquote > :not(mark) {\n    display: none;\n}\n:is(img[alt="2"], img[alt="4"]) {\n    display: none;\n    & + img {\n        &, & + img, & + img + img + img {\n            max-width: 40%;\n        }\n    }\n}\n:is(img[alt="3"], img[alt="6"]) {\n    display: none;\n    & + img {\n        &, & + img, & + img, & + img  + img {\n            max-width: 30%;\n        }\n    }\n}\nimg {\n    max-height: 600px;\n}\nimg[src$=".svg.png"] {\n    background: white;\n}\nimg[alt=blur] + img {\n    filter: blur(.25rem);\n\n}\nsummary.output {\n    display: none;\n}\n</style>\n'
      • presentation styling
        display\
        
        .no-pres {
            display: none;
        }
        span.c::after {
            content: ";";
        }
        /** the presentation version shows marked blockquotes **/
        blockquote > :not(mark) {
            display: none;
        }
        :is(img[alt="2"], img[alt="4"]) {
            display: none;
            & + img {
                &, & + img, & + img + img + img {
                    max-width: 40%;
                }
            }
        }
        :is(img[alt="3"], img[alt="6"]) {
            display: none;
            & + img {
                &, & + img, & + img, & + img  + img {
                    max-width: 30%;
                }
            }
        }
        img {
            max-height: 600px;
        }
        img[src$=".svg.png"] {
            background: white;
        }
        img[alt=blur] + img {
            filter: blur(.25rem);
            
        }
        summary.output {
            display: none;
        }
        </style>
        
  47. attached files
    1. add file
    None
  48. attached files
    1. add file
    None
  49. attached files
    1. add file
    None

  1. attached files
    1. add file
    # settings
    -1
      • settings

  2. attached files
    1. add file
    %% ```pug form(name="accessibility") hgroup h2 accesssibility settings p change typography, color, and nonvisual settings ol li.theme label span.label color scheme select(name="color-scheme", onchange="toggleClass(event)") option(value="") system option(value="light") light option(value="dark") dark li.colors label span.label light color input(type="color", name="fg", onchange="updateStyleVar(event)", value="#000000") label span.label dark color input(type="color", name="bg", onchange="updateStyleVar(event)", value="#FFFFFF") label span.label accent color input(type="color", name="accent-color", onchange="updateStyleVar(event)", value="#808080") li.font-size label span.label font size select(name="font-size", onchange="updateStyleVar(event)") option(value="0.5625rem") xx-small option(value="0.625rem") x-small option(value="0.8125rem") small option(value="1rem") medium option(value="1.125rem") large option(value="1.625rem") x-large option(value="2rem") xx-large option(value="3rem") xxx-large option(value="4rem") xxxx-large option(value="5rem") xxxxx-large option(value="6rem") xxxxxx-large option(value="7rem") xxxxxxx-large option(value="8rem") xxxxxxxx-large li.line-height label span.label line height input(name="line-height", type="number", onchange="updateStyleVar(event)", value=1) ```
    36
      • accesssibility settings

        change typography, color, and nonvisual settings

      • 'form(name="accessibility")\n    hgroup\n        h2 accesssibility settings\n        p change typography, color, and nonvisual settings\n    ol\n        li.theme\n            label\n                span.label color scheme\n            select(name="color-scheme", onchange="toggleClass(event)")\n                option(value="") system\n                option(value="light") light\n                option(value="dark") dark\n        li.colors\n            label\n                span.label light color\n            input(type="color", name="fg", onchange="updateStyleVar(event)", value="#000000")\n            label\n                span.label dark color\n            input(type="color", name="bg", onchange="updateStyleVar(event)", value="#FFFFFF")\n            label\n                span.label accent color\n            input(type="color", name="accent-color", onchange="updateStyleVar(event)", value="#808080")\n        li.font-size\n            label \n                span.label font size\n            select(name="font-size", onchange="updateStyleVar(event)")\n                option(value="0.5625rem") xx-small\n                option(value="0.625rem") x-small\n                option(value="0.8125rem") small\n                option(value="1rem") medium\n                option(value="1.125rem") large\n                option(value="1.625rem") x-large\n                option(value="2rem") xx-large\n                option(value="3rem") xxx-large\n                option(value="4rem") xxxx-large\n                option(value="5rem") xxxxx-large\n                option(value="6rem") xxxxxx-large\n                option(value="7rem") xxxxxxx-large\n                option(value="8rem") xxxxxxxx-large\n\n        li.line-height\n            label \n                span.label line height\n            input(name="line-height", type="number", onchange="updateStyleVar(event)", value=1)\n\n'
  3. attached files
    1. add file
    %%html <form class="runtime" name="text/plain"> <hgroup> <h2>browser</h2> <p>the builtin runtime types</p> </hgroup> <script> const mimeTypes = { "txt": "text/plain", "md": "text/markdown", "html": "text/html", "json": "application/json", "png": "image/png", "jpg": "image/jpeg", "jpeg": "image/jpeg", "svg": "image/svg+xml", "bmp": "image/bmp", "js": "application/javascript", "ipynb": "application/json+ipynb" }; function inferMimetypeFromExtension(url) { return mimeTypes[url.split('.').pop().toLowerCase()] || "text/plain"; } function newOutput(data={}, metadata={}, type="display_data") { return{ "output_type": type, "data": {...data}, "metadata": {...metadata} } } function newError(error) { return { "output_type": "error", "ename": error.name, "evalue": error.message, "traceback": [] } } function runBrowser(cell, runtime) { const cellData = cell.getCellData(); return runBrowserSource(cell, runtime, cellData.source) } function isJsonType(mimetype) { return Boolean( mimetype?.startsWith("application/json") ) || Boolean( mimetype?.startsWith("application/vnd.jupyter.widget") ); } function runBrowserSource(cell, runtime, source, mimetype="") { const cellData = cell.getCellData(); mimetype = mimetype || cell.form.input_type.value; source = source || cellData.source; if (isJsonType(mimetype)) { source = JSON.parse(source); } if (mimetype == "text/uri-list") { // fetch the url const outputs = []; const urls = source.split("\n").filter(line => line.trim() && !line.startsWith("#")); for (const url of urls) { const match = url.match("data:([^;]+)(;base64){0,1},(.*)"); if (match) { outputs.push( newOutput( Object.fromEntries([[match[1], match[3]]]), {}, ) ) } else { outputs.push( newOutput( Object.fromEntries([[inferMimetypeFromExtension(url), ""]]), Object.fromEntries([[inferMimetypeFromExtension(url), {src: url}]]) ) ) } } console.log(outputs) return new Promise(resolve => resolve(outputs)) } return new Promise((resolve, reject) => { const outputs = [newOutput(Object.fromEntries([[mimetype, source]]))]; resolve(outputs) }) } document.forms["text/plain"].__data__ = runBrowser </script> </form>
    30
      • browser

        the builtin runtime types

      • <IPython.core.display.HTML object>
  4. attached files
    1. add file
    %%html <script id="utils"> function toggleClassSelect(event, element) { const classes = event.target.value ? event.target.value.split(" ") : []; Array.from(event.target.options).forEach( (option) => { if (option.value) { option.value.split(" ").forEach( (option) => { element.classList.toggle(option, classes.includes(option)) } ) element.classList.toggle(option.value, option.value == event.target.value) }; } ) } function toggleClassCheckbox(event, element) { element.classList.toggle(event.target.value, event.target.checked) } function toggleClass(event) { (event.target.ariaControlsElements || [document.body]).forEach(element => { if (event.target.tagName == "SELECT") { toggleClassSelect(event, element) } else if (event.target.tagName == "INPUT") { toggleClassCheckbox(event, element) } }); } function updateStyleVar(event) { document.body.style.setProperty("--" + event.target.name, event.target.value) } function waitForProperty(object, name, ...args) { return (resolve, reject) => { if (object[name]) { resolve(...args) } else { setTimeout(waitForProperty(object, name, ...args).bind(this, resolve, reject), 30) } } } function toggleDialog(object, open=true) { if (object.tagName == "DIALOG") { return object.showModal() } if (open) { var role = object.getAttribute("role"); if (role && role != "dialog" ) { object.setAttribute("data-role", role) } object.setAttribute("role", "dialog"); object.setAttribute("aria-modal", "true"); } else { object = object.matches("[role=dialog][aria-modal=true]") ? object : object.closest("[role=dialog][aria-modal=true]"); if (!object) { return } object.removeAttribute("role"); if (object.dataset.role) { object.setAttribute("role", object.dataset.role); object.removeAttribute("dataset-role"); } object.setAttribute("aria-modal", "false"); } toggleInert(object, open) } function toggleInert(object, inert=true, root=true) { if (!object.parentElement || !object.parentElement.children ) {return} for (const child of Array.from(object.parentElement.children).filter(child => child !== object)) { inert ? child.setAttribute("inert", "") : child.removeAttribute("inert"); } toggleInert(object.parentElement, inert, false) } </script>
    31
      • <IPython.core.display.HTML object>
  5. attached files
    1. add file
    %%html <form name="text/markdown"> <hgroup> <h2>markdown</h2> <p>render markdown with markdown it</p> </hgroup> <p> <a href="#">learn more about markdown syntax</a> </p> <script> document.forms["text/markdown"].render = async (source) => { const tpl = document.getElementById("text:markdown:template"); tpl.parentElement.insertBefore(tpl.content.cloneNode(true).querySelector("script"), tpl); return new Promise(waitForProperty(document.forms["text/markdown"], "markdown", source)).then((source)=>{ return document.forms["text/markdown"].render(source) }) } </script> <template id="text:markdown:template"> <script type="module"> import markdownIt from 'https://cdn.jsdelivr.net/npm/markdown-it@14.1.0/+esm' document.forms["text/markdown"].markdownIt = markdownIt document.forms["text/markdown"].markdown= markdownIt({html: true}) document.forms["text/markdown"].render = async (source) => { if (source.join) {source = source.join();} return document.forms["text/markdown"].markdown.render(source) } </script> </template> </form>
    32
      • markdown

        render markdown with markdown it

        learn more about markdown syntax

      • <IPython.core.display.HTML object>
  6. attached files
    1. add file
    %%html <form name="text/mermaid"> <hgroup> <h2>mermaid</h2> <p></p> </hgroup> <p> <a href="#">learn more about mermaid syntax</a> </p> <template id="text:mermaid:template"> <script type="module"> import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs' mermaid.initialize({ startOnLoad: false }); document.forms["text/mermaid"].mermaid = mermaid document.forms["text/mermaid"].render = async (source) => { const { svg } = await mermaid.render('graphDiv', source) return svg } document.forms["text/mermaid"].run = async (config) => { await mermaid.run(config) } </script> </template> <script> ["render", "run"].forEach((key) => { document.forms["text/mermaid"][key] = (...args) => { const tpl = document.getElementById("text:mermaid:template"); tpl.parentElement.insertBefore(tpl.content.cloneNode(true).querySelector("script"), tpl); return new Promise(waitForProperty(document.forms["text/mermaid"], "mermaid", ...args)).then((...args)=>{ return document.forms["text/mermaid"][key](...args) }) } }); (() => { const nodes = document.querySelectorAll("code.language-mermaid"); nodes && document.forms["text/mermaid"].run({nodes: nodes}) })() </script> </form>
    33
      • mermaid

        learn more about mermaid syntax

      • <IPython.core.display.HTML object>
  7. attached files
    1. add file
    None
  8. attached files
    1. add file
    None
  9. attached files
    1. add file
    None
  10. attached files
    1. add file
    None